<template>
  <el-header id="pageHeader">
    <el-button
      @click="menuToggle"
      icon="el-icon-menu"
      size="mini"
      type="text"
      style="font-size: 35px;line-height: 50px;float: left"
    ></el-button>
    <div class="logoBox">
      <img src="../../assets/logo.png" alt="logo">
      <b class="logo_title"> &nbsp;&nbsp;&nbsp;榆杨 </b>
    </div>
    <div class="userID">{{this.$store.state.userInfo.employeeLv}}: 欢迎您！</div>
    <div class="userCenter">
      <div class="head">
        <img src="../../../static/user_icon.jpg" alt="">
      </div>
      <div class="userSub">
        <div @click="logOut"><i class="fa fa-power-off"></i></div>
      </div>
    </div>
  </el-header>
</template>

<script>

export default {
  name: 'topBar',
  methods: {
    showSub () {
      console.log(this)
    },
    menuToggle () {
      this.$store.dispatch('menuToggle')
    },
    logOut () {
      this.$store.state.userInfo.isLogged = false
    }
  }
}
</script>

<style scoped lang="less">
  #pageHeader{
    position: fixed;
    top: 0;
    width: 100vw;
    background-color: #00838F;
    line-height: 60px;
    height: 60px;
    z-index: 2001;

    .userID{
      float: right;
      margin-right: 30px;
      line-height: 60px;
      color: #FFFFFF;
    }
    .logoBox{
      height: 60px;
      width: 130px;
      float: left;
      color: #fff;
      text-align: center;
      img{
        height: 40px;
        line-height: 60px;
        vertical-align: middle;
      }
    }
    .userCenter{
      float: right;
      margin-right: 20px;
      line-height: 60px;
      /*position: relative;*/
      .head{
        height: 40px;
        width: 40px;
        border-radius: 50%;
        margin-top: 9px;
        overflow: hidden;
        position: absolute;
        z-index: 2002;
        &:hover{
          cursor: pointer;
        }
        img{
          height: 40px;
        }
      }
      &:hover{
        .userSub{
          height: 70px;
        }
      }
      .userSub{
        height: 0;
        transition: .5s;
        width: 40px;
        overflow: hidden;
        background-color: #fff;
        border-radius: 0 0 20px 20px;
        position: relative;
        top: 30px;
        z-index: 2001;
        >div{
          height: 40px;
          width: 40px;
          font-size: 30px;
          line-height: 30px;
          text-align: center;
          position: absolute;
          bottom: 0;
          color: #00838f;
          &:hover{
            cursor: pointer;
            color: #499FEA;
          }
        }
      }
    }
  }
</style>
